<template lang="html">
  <div class="order-item">
    <h3>安心食疗</h3>
    <div class="order-content clear-fix">
      <div class="order-content-img">
        <img :src="orderdata.img" alt="">
      </div>
      <div class="order-content-text">
        <h4>{{ orderdata.title }}</h4>
        <p>{{ orderdata.context }}</p>
        <span>七天退换</span>
      </div>
      <div class="order-content-right">
        <span>￥{{ orderdata.price }}</span>
        <br>
        <del>￥{{ orderdata.delprice }}</del>
        <br>
        <span>×{{ orderdata.num }}</span>
      </div>
    </div>
    <div class="order-count">
      <span>共{{orderdata.num}}件商品</span>
      <span>合计：{{orderdata.num}}</span>
      <span>包含运费￥{{orderdata.num}}</span>
    </div>
    <div class="order-btn" @click='setClick'>
      <button index='0' :class="{'active':currentIndex == '0'}" type="button" name="button">延长收货</button>
      <router-link tag="button" :to="{name:'OrderDetails',params:{id:orderdata.id}}" index='1' :class="{'active':currentIndex == '1'}" type="button" name="button">查看物流</router-link>
      <button index='2' :class="{'active':currentIndex == '2'}" type="button" name="button">确认收货</button>
    </div>
  </div>
</template>

<script>
export default {
  name:'OrderItem',
  data(){
    return{
      currentIndex:2
    }
  },
  props:{
    orderdata:{
      type:Object,
      default:function(){
        return{}
      }
    }
  },
  methods:{
    setClick(event){
      this.currentIndex = event.target.getAttribute('index')
    }
  }
}
</script>

<style lang="less" scoped>
.order-item{
  background-color: #fff;
  padding: 0.2rem 0;
  margin-top: 0.15rem;
  h3{
    color: #8f8f8f;
    font-weight: 400;
    padding-left: 0.35rem;
    box-sizing: border-box;
  }
  .order-content{
    background-color: #f1f1f1;
    margin: 0.2rem 0;
    padding: 0.15rem 0.2rem;
    box-sizing: border-box;
    .order-content-img{
      width: 1.45rem;
      height: 1.3rem;
      float: left;
      img{
        width: 100%;
        height: 100%;
      }
    }
    .order-content-text{
      float: left;
      margin-left: 0.4rem;
      color: #8f8f8f;
      h4{
        font-weight: 400;
        font-size: 0.26rem;
        margin-bottom: 0.1rem;
      }
      p{
        font-size: 0.12rem;
        margin-bottom: 0.15rem;
      }
      span{
        border: 0.01rem solid #a40000;
        color: #a40000;
        font-size: 0.12rem;
        border-radius: 0.06rem;
      }
    }
    .order-content-right{
      float: right;
      color: #8f8f8f;
      text-align: right;
    }
  }
  .order-count{
    text-align: right;
    color: #8f8f8f;
    margin: 0 0.3rem;
    padding-bottom: 0.2rem;
    border-bottom: 0.01rem solid #f1f1f1;
  }
  .order-btn{
    margin-top: 0.13rem;
    text-align: right;
    padding-right: 0.32rem;
    box-sizing: border-box;
    button{
      width: 1.2rem;
      height: 0.4rem;
      border-radius: 0.1rem;
      background-color: #fff;
      border: 0.01rem solid #8f8f8f;
      color: #8f8f8f;
      margin-left: 0.17rem;
      outline: none;
    }
    .active{
      background-color: #43bf92;
      color: #fff;
      border-color: #43bf92;
    }
  }

}
</style>
